<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">企业管理</el-breadcrumb-item>
            <el-breadcrumb-item>
              <a href="/">企业信息</a>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="140px"
      class="demo-ruleForm"
    >
      <el-row class="er">
        <el-col :span="4">
          <div class="grid-content bg-purple bg-pic">
            <!-- 用户上传logo -->

            <el-upload
              class="avatar-uploader"
              action="/api/sys/no-limit/upload/single"
              :headers="this.$global.setUploadHeaders"
              accept
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="tip">用户上传</div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple-light">
            <el-form-item label="公司名称:" prop="companyName">
              <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称" class="int-mc"></el-input>
            </el-form-item>
            <el-form-item label="所属行业:" class="hangye">
              <el-select
                v-model="ruleForm.industryCode"
                placeholder="请选择行业"
                @change="getCompanyIndustryCode"
                style="width:276px"
              >
                <el-option
                  :value="item.dictCode"
                  :label="item.dictName"
                  v-for="item in industryDictList"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <el-form-item label="公司性质:">
              <el-select
                v-model="ruleForm.typeCode"
                placeholder="请选择"
                @change="getCompanyNatureCode"
                style="width:297px"
              >
                <el-option
                  :value="item.dictCode"
                  :label="item.dictName"
                  v-for="item in typeDictList"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- //用户公司详细地址 -->
      <el-row class="address-box">
        <el-col :span="7">
          <div class="grid-content bg-purple-dark">
            <el-form-item label="公司所在地:" prop="addrProvince">
              <el-select v-model="ruleForm.addrProvince" placeholder="请选择">
                <el-option
                  v-for="item in ProList"
                  :key="item.id"
                  :label="item.locationName"
                  :value="item.id"
                >{{item.locationName}}</el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-dark address-ruleForm">
            <el-form-item prop="addrCity">
              <el-select
                v-model="ruleForm.addrCity"
                @focus="getAddrCity"
                style="margin-left:-66px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in city"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-dark address-ruleForm1">
            <el-form-item prop="addressDetail">
              <el-input
                v-model="ruleForm.addressDetail"
                style="width:633px;margin-left:-36px"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- //用户上传 营业执照 -->
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="营业执照:">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="/api/sys/no-limit/upload/single"
                :on-preview="handlePreview"
                :on-success="handleAvatarSuccess1"
                :on-remove="handleRemove"
                :auto-upload="false"
                :on-change="handleChange"
                :headers="this.$global.setUploadHeaders"
                accept
              >
                <el-button slot="trigger" size="small" type="primary">上传</el-button>
                <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                </el-button>-->
                <div
                  slot="tip"
                  class="el-upload__tip"
                  style="color:red"
                >注：图片格式为 JPG/JPEG/PNG/PDF 大小在2MB内</div>
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="社会信用代码" prop="cfuscc">
              <el-input v-model="ruleForm.cfuscc" class="input-fr"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- //法人姓名和信息 -->
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="法人姓名:" prop="legalEntityName">
              <el-input v-model="ruleForm.legalEntityName" class="input-fr"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="法人身份证号:" prop="legalEntityIdcard">
              <el-input v-model="ruleForm.legalEntityIdcard" class="input-fr"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- //对公银行和银行账号 -->
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="对公银行账号：">
              <el-input v-model="ruleForm.bankAccount" placeholder="请输入" class="input-fr"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="对公银行开户行：">
              <el-select
                v-model="ruleForm.bankCode"
                placeholder="请选择"
                @change="getBankNameCode"
                class="input-fr1"
              >
                <el-option
                  :value="item.dictCode"
                  :label="item.dictName"
                  v-for="item in bankDictList"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- //提交和取消 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="8">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="gotomessage">提交</el-button>
          <el-button type="primary">取消</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { async } from 'q'

export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false, //上传营业执照
      imageUrl: '',
      ruleForm: {
        companyName: '', //公司名
        typeCode: '', //公司性质
        industryCode: '', //公司行业
        addrProvince: '', //公司所在省
        addrCity: '', //公司所在市
        addressDetail: '', //公司所在地址
        cfuscc: '', //社会信用代码
        legalEntityName: '', //法人姓名
        legalEntityIdcard: '', //法人身份证
        bankCode: '', //对公银行名称
        bankAccount: '', //对公银行账号
        id: '', //公司id
        tentId: '', //租户id
        tentAttachmentId: '', //用户上传的logo ID
        attachmentBpId: '', //营业执照附件id
        typeName: '', //公司性质
        industryName: '', //公司行业
        bankName: '', //对公银行账号
        fileUrl:''//用户上传图片的url
      },
      industryDictList: [],
      typeDictList: [],
      bankDictList: [],
      ProList: {}, //所有的省
      city: {}, //市
      key: '',
      rules: {
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        cfuscc: [
          { required: true, message: '请输入社会信用代码', trigger: 'blur' }
        ],
        legalEntityIdcard: [
          { required: true, message: '请输入法人身份证号', trigger: 'blur' }
        ],
        legalEntityName: [
          { required: true, message: '请输入法人姓名', trigger: 'blur' }
        ],
        addrProvince: [
          { required: true, message: '请输入公司所在地省', trigger: 'blur' }
        ],
        addrCity: [
          { required: true, message: '请输入公司所在地市', trigger: 'blur' }
        ],
        addressDetail: [
          {
            required: true,
            message: '请输入公司所在地详细地址',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
      console.log(file.url)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    handleAvatarSuccess(res, file) {
      console.log(res.data.id)
      console.log(file.response.data.fileUrl)
      this.ruleForm.fileUrl = file.response.data.fileUrl
      window.localStorage.setItem('url',this.ruleForm.fileUrl)

      console.log(file)
      this.ruleForm.tentAttachmentId = res.data.id
      // console.log(file)
      this.imageUrl = URL.createObjectURL(file.raw)
      // this.getTentAttachmentId()
    },
    handleAvatarSuccess1(res, file) {
      console.log(res.data.id)
      this.ruleForm.attachmentBpId = res.data.id
    },
    handleChange(file, fileList) {
      this.$refs.upload.submit()
    },

    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    handlePreview() {},
    handleRemove() {},
    submitUpload() {
      //  this.$refs.upload.submit();
    },
    //提交用户的所有信息
    async gotomessage() {
      console.log(this.ruleForm)
      var ok = false
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          ok = valid
        }
      })
      if (!ok) {
        return
      }
      //更新企业信息
      const { data: res } = await this.$http.post(
        'company/information/update',
        this.ruleForm
      )
      console.log(res)
      if (res.code != 0) {
        return this.$message.error(res.msg)
      }
      const { data: res2 } = await this.$http.post(
        'company/information/authenticate',
        { tentId: this.ruleForm.tentId }
      )
      if (res2.code == 0) {
        this.$router.push('/companyinfochangemsg')
      }
    },
    perfectInforList() {},
    //获取当前用户的企业信息
    async getInforCurrentMsg() {
      const { data: res } = await this.$http.get('company/information/current')
      console.log(res)
      this.ruleForm.id = res.data.id
      this.ruleForm.tentId = res.data.tentId
      this.ruleForm.companyName = res.data.companyName
      this.ruleForm.typeName = res.data.typeCode
      this.ruleForm.typeCode = res.data.typeCode
      this.ruleForm.industryCode = res.data.industryCode
      this.ruleForm.industryName = res.data.industryName
      this.ruleForm.addrProvince = res.data.addrProvince
      this.ruleForm.addrCity = res.data.addrCity
      this.ruleForm.addressDetail = res.data.addressDetail
      this.ruleForm.cfuscc = res.data.cfuscc
      this.ruleForm.legalEntityName = res.data.legalEntityName
      this.ruleForm.legalEntityIdcard = res.data.legalEntityIdcard
      this.ruleForm.bankCode = res.data.bankCode
      this.ruleForm.bankName = res.data.bankName
      this.ruleForm.bankAccount = res.data.bankAccount
      console.log(this.ruleForm)
    },

    //获取所有的省
    async getAddrProvince() {
      const { data: res } = await this.$http.get('sys/list/location/00')
      this.ProList = res.rows
    },
    //通过省获取所有的市
    async getAddrCity() {
      const { data: res } = await this.$http.get(
        '/sys/list/sublocation/' + this.ruleForm.addrProvince
      )
      this.city = res.rows
      var ProList = this.ProList
      var that = this
      //通过省的id找回对应的省,并赋值
      ProList.forEach(item => {
        if (item.id == that.ruleForm.addrProvince) {
          that.ruleForm.addrProvince = item.locationName
        }
      })
    },

    //获取字典中公司的所属性质
    async getCompanyNature() {
      const { data: res } = await this.$http.get('sys/list/dicts/30023')
      this.typeDictList = res.data.dictionaries
    },
    //获取字典中公司的所属行业
    async getCompanyIndustry() {
      const { data: res } = await this.$http.get('sys/list/dicts/10090')
      this.industryDictList = res.data.dictionaries
    },
    //获取字典中对公银行开户行
    async getBankName() {
      const { data: res } = await this.$http.get('sys/list/dicts/10024')
      this.bankDictList = res.data.dictionaries
    },
    getCompanyNatureCode() {
      for (let i = 0; i < this.typeDictList.length; i++) {
        if (this.typeDictList[i].dictCode === this.ruleForm.typeCode) {
          this.ruleForm.typeName = this.typeDictList[i].dictName
        }
      }
    },
    getCompanyIndustryCode() {
      for (let i = 0; i < this.industryDictList.length; i++) {
        if (this.industryDictList[i].dictCode === this.ruleForm.industryCode) {
          this.ruleForm.industryName = this.industryDictList[i].dictName
        }
      }
    },
    getBankNameCode() {
      for (let i = 0; i < this.bankDictList.length; i++) {
        if (this.bankDictList[i].dictCode === this.ruleForm.bankCode) {
          this.ruleForm.bankName = this.bankDictList[i].dictName
        }
      }
    }
  },
  created() {
    this.getInforCurrentMsg()
    this.getCompanyNature()
    this.getCompanyIndustry()
    this.getBankName()
    this.getAddrProvince()
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 1355px;
  margin: auto;

  .title {
    margin: auto;
    margin-top: 100px;
    width: 126px;
    height: 24px;
    font-size: 25px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: rgba(102, 102, 102, 1);
    line-height: 26px;
  }

  .title1 {
    margin: auto;
    margin-top: 30px;
    width: 534px;
    height: 21px;
    font-size: 21px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: rgba(102, 102, 102, 1);
    line-height: 26px;
  }
}

.er {
  margin-top: 20px;
}

.el-input {
  height: 40px !important;
  //  line-height: 40px!important;
}

.el-upload {
  border: 1px dashed #d9d9d9;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 0px;
  color: #8c939d;
  width: 222px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.tip {
  //   margin-left: 50px;
  margin: auto;
  width: 70px;
  font-size: 16px;
  color: #42a2ff;
}

.hangye {
  margin-top: 60px;
}

.int-mc {
  width: 65%;
}

.er {
  margin-top: 45px;
}

.bg-pic {
  background-color: #eff3f8;
  background-image: url(../../assets/Verification/u3374.png);
  background-repeat: no-repeat;
  background-position: center;
}

.address-ruleForm,
.address-ruleForm1 {
  margin-left: -75px;
}

.address-box {
  margin-top: 25px;
}

.input-fr {
  width: 77%;
}

.input-fr1 {
  width: 77%;
}
</style>
